<template>
	<view class="certification-container">
		<view class="content">
			<uni-forms ref="form" :modelValue="formData" label-width="120px">
				<uni-forms-item required label="企业类型" name="type">
					<uni-data-select :disabled="!isWrite" v-model="formData.typeValue" :localdata="formData.type"
						@change="change">
					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item required label="企业名称" name="enterpriseName">
					<uni-easyinput :disabled="!isWrite" type="text" v-model="formData.enterpriseName"
						placeholder="请输入企业名称" />
				</uni-forms-item>
				<view @click="getAddress">
					<uni-forms-item required name="address" label="企业地址">
						<uni-easyinput :disabled="!isWrite" type="text" v-model="formData.address"
							placeholder="请输入企业地址"></uni-easyinput>
					</uni-forms-item>
				</view>
				<uni-forms-item required name="IdFront" label="身份证正面">
					<view class="certification-image-box">
						<view class="certification-image-item" v-for="(item,index) in formData.IdFront" :key="index">
							<view class="close-btn">
								<uni-icons type="closeempty" size="18" color="#fff" @click="delImage(index,'IdFront')">
								</uni-icons>
							</view>
							<view class="image-box">
								<image :src="item" mode="aspectFill"></image>
							</view>
						</view>
						<!-- 添加图片的icon,最多上传五个图片超出五个就不展示 -->
						<view v-if="formData.IdFront.length < 1" class="certification-image-item"
							@click="chooseImage('IdFront')">
							<view class="image-box">
								<!-- #ifdef H5 -->
								<uni-icons custom-prefix="custom-icon" class="icon iconfont"
									type="icon-shenfenzhengzhengmian" size="100" color="#000"></uni-icons>
								<!-- #endif -->
								<!-- #ifndef H5 -->
								<text class="iconfont icon-shenfenzhengzhengmian" style="font-size: 100px;"></text>
								<!-- #endif -->
							</view>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item required name="IdBack" label="身份证反面">
					<view class="certification-image-box">
						<view class="certification-image-item" v-for="(item,index) in formData.IdBack" :key="index">
							<view class="close-btn">
								<uni-icons type="closeempty" size="18" color="#fff" @click="delImage(index,'IdBack')">
								</uni-icons>
							</view>
							<view class="image-box">
								<image :src="item" mode="aspectFill"></image>
							</view>
						</view>
						<!-- 添加图片的icon,最多上传五个图片超出五个就不展示 -->
						<view v-if="formData.IdBack.length < 1" class="certification-image-item"
							@click="chooseImage('IdBack')">
							<view class="image-box">
								<image src="../../static/身份证.png" mode="aspectFill" style="width: 100%; height: 100%;">
								</image>
							</view>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item required name="businessLicense" label="企业营业执照">
					<view class="certification-image-box">
						<view class="certification-image-item" v-for="(item,index) in formData.businessLicense"
							:key="index">
							<view class="close-btn">
								<uni-icons type="closeempty" size="18" color="#fff"
									@click="delImage(index,'businessLicense')">
								</uni-icons>
							</view>
							<view class="image-box">
								<image :src="item" mode="aspectFill"></image>
							</view>
						</view>
						<!-- 添加图片的icon,最多上传五个图片超出五个就不展示 -->
						<view v-if="formData.businessLicense.length < 1" class="certification-image-item"
							@click="chooseImage('businessLicense')">
							<view class="image-box">
								<!-- #ifdef H5 -->
								<uni-icons custom-prefix="custom-icon" class="icon iconfont" type="icon-yingyezhizhao"
									size="100" color="#000"></uni-icons>
								<!-- #endif -->
								<!-- #ifndef H5 -->
								<text class="iconfont icon-yingyezhizhao" style="font-size: 90px;"></text>
								<!-- #endif -->
							</view>
						</view>
					</view>
				</uni-forms-item>
			</uni-forms>
			<button v-if="!qiyeData || qiyeData.status === 1" class="btn" @click="submit">{{btnTitle}}</button>
			<button v-else class="btn">{{btnTitle}}</button>
		</view>
	</view>
</template>

<script>
	import {
		certification
	} from "../../ajax/api/qiye.js";
	import {
		mapState,
		mapMutations,
	} from "vuex";
	export default {
		data() {
			return {
				isWrite: true,
				formData: {
					type: [{
							value: 0,
							text: "个人独资企业"
						},
						{
							value: 1,
							text: "合伙企业"
						},
						{
							value: 2,
							text: "公司制企业"
						}
					],
					typeValue: 0,
					enterpriseName: "", // 企业名称
					address: "", //企业地址
					IdFront: [], //身份证正面
					IdBack: [], //身份证反面
					businessLicense: [], //营业执照
				},
				btnTitle: "提交资料等待审核",
				rules: {
					typeValue: {
						rules: [{
							required: true,
							errorMessage: '请选择企业类型',
						}]
					},
					enterpriseName: {
						rules: [{
							required: true,
							errorMessage: '请填写企业名称',
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '请填写企业地址',
						}]
					},
					IdFront: {
						rules: [{
							required: true,
							errorMessage: '请上传身份证正面',
						}]
					},
					IdBack: {
						rules: [{
							required: true,
							errorMessage: '请上传身份证反面',
						}]
					},
					businessLicense: {
						rules: [{
							required: true,
							errorMessage: '请上传营业执照',
						}]
					}
				}
			}
		},
		onShow() {
			// 有值，则之前已经提交认证了
			if (this.qiyeData) {
				// 进行数据回显
				this.formData.typeValue = this.qiyeData.enterpriseType;
				this.formData.enterpriseName = this.qiyeData.enterpriseName;
				this.formData.address = this.qiyeData.address;
				this.formData.IdFront = [this.qiyeData.IdFront];
				this.formData.IdBack = [this.qiyeData.IdBack];
				this.formData.businessLicense = [this.qiyeData.businessLicense];
				if (this.qiyeData.status === 0) {
					this.btnTitle = "等待审核中...";
					this.isWrite = false;
				} else if (this.qiyeData.status === 1) {
					this.isWrite = true;
					this.btnTitle = "审核不通过，请重新提交"
				} else {
					this.isWrite = false;
					this.btnTitle = "审核通过"
				}
			}
			// #ifdef MP-WEIXIN
			if (wx.hideHomeButton) {
				wx.hideHomeButton();
			}
			// #endif
		},
		computed: {
			...mapState(["qiyeData", "token"])
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			...mapMutations(["updateQiyeData"]),
			change(e) {
				this.formData.typeValue = e;
			},
			async chooseImage(e) {
				if (this.isWrite) {
					uni.chooseImage({
						count: 1,
						success: (res) => {
							const tempFilePaths = res.tempFilePaths;
							if (e === "IdFront") {
								uni.uploadFile({
									// url: 'http://localhost:9527/api/upload',
									url:"http://192.168.43.218:9527/api/upload",
									filePath: tempFilePaths[0],
									header: {
										'Authorization': "Bearer " + this.token
									},
									name: 'file',
									success: async (uploadFileRes) => {
										const url = "http://192.168.43.218:9527" + (JSON.parse(uploadFileRes.data)).data;
										console.log(url);
										this.formData.IdFront.push(url);
									}
								});
							} else if (e === "IdBack") {
								uni.uploadFile({
									url: 'http://192.168.43.218:9527/api/upload',
									filePath: tempFilePaths[0],
									header: {
										'Authorization': "Bearer " + this.token
									},
									name: 'file',
									success: async (uploadFileRes) => {
										const url = "http://192.168.43.218:9527" + (JSON.parse(uploadFileRes.data)).data;
										this.formData.IdBack.push(url);
									}
								});
							} else {
								uni.uploadFile({
									url: 'http://192.168.43.218:9527/api/upload',
									filePath: tempFilePaths[0],
									header: {
										'Authorization': "Bearer " + this.token
									},
									name: 'file',
									success: async (uploadFileRes) => {
										const url = "http://192.168.43.218:9527" + (JSON.parse(uploadFileRes.data)).data;
										this.formData.businessLicense.push(url);
									}
								});
							}
						}
					})
				}
			},
			// 获取详细地址
			getAddress() {
				if (this.isWrite) {
					// 点击调起地图选择位置
					const that = this;
					// 进行位置授权
					uni.authorize({
						scope: 'scope.userLocation',
						success(res) {
							// 选择位置
							uni.chooseLocation({
								success: (res) => {
									that.formData.address = res.address;
								},
								fail(error) {
									console.log('选择位置失败', error)
								},
							})
						}
					})
				}
			},
			// 删除图片
			delImage(index, e) {
				this.formData[e].splice(index, 1);
			},
			// 提交资料
			submit() {
				this.$refs.form.validate().then(async res => {
					const result = await certification({
						enterpriseType: this.formData.typeValue,
						enterpriseName: this.formData.enterpriseName,
						address: this.formData.address,
						IdFront: this.formData.IdFront[0],
						IdBack: this.formData.IdBack[0],
						businessLicense: this.formData.businessLicense[0]
					});
					uni.navigateTo({
						url: "/pages/welcome/welcome"
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	@import "./css/certification.scss";
</style>
